import React from 'react';
import { Button, Table, Input, Select, Row, Col, Space, DatePicker } from 'antd';
import 'antd/dist/antd.css';
import './index.css';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import moment from 'moment';
import * as actions from '../store/action'
const columns = [

    {
        title: '公司ID',
        dataIndex: 'comID',
    },
    {
        title: '公司名',
        dataIndex: 'comName',
    },
    {
        title: '客户ID',
        dataIndex: 'userID',
    },
    {
        title: '客户名称',
        dataIndex: 'userName',
    },
    {
        title: '客户手机号',
        dataIndex: 'userphone',
    },
    {
        title: '增值税纳税人类型',
        dataIndex: 'class',
    },
    {
        title: '循环项目服务开始时间',
        dataIndex: 'LoopBegins',
    },
    {
        title: '循环项目服务结束时间',
        dataIndex: 'loopTermination',
    },
    {
        title: '代开专票服务开始时间',
        dataIndex: 'invoiceBegins',
    },
    {
        title: '代开专票服务结束时间',
        dataIndex: 'invoiceTermination',
    },

]
// 引用值
function mapStateToPrpos(state, ownProps) {
    console.log(state)
    return {
        comMessdata: state.comMessdatas ?  state.comMessdatas : state.comMessdata,
    }
}
// 引用方法
function mapDispatchToProps(dispatch, ownProps) {
    return {
        getcommess: (userkey) => { dispatch(actions.getcommess(userkey)) }
    }
}
let userkey=new Object();

const CompanyMessage = (props) => {
    const { Option } = Select;
    const { getcommess, comMessdata } = props;

    const { RangePicker } = DatePicker;
    
    const onSelectChange = (key) => {
        userkey.key = key
    };
    const rowSelection = {
        type: 'radio',
        onChange: onSelectChange,
    };
    // 公司ID
    const getucomID = (e) => {
        userkey.comID = e.target.value
    }
    // 公司名称
    const getucomName = (e) => {
        userkey.comname = e.target.value
    }
    // 用户ID
    const getuserID = (e) => {
        userkey.userid = e.target.value
    }
    // 用户名称
    const getuserName = (e) => {
        userkey.userName = e.target.value
    }
    // 手机
    const getuserphone = (e) => {
        userkey.phone = e.target.value
    }
    // 纳税人类型
    const handleChange = (value) => {
        userkey.userClass = value
    };
    // 服务循环时间
    const ctimeChan = (value) => {
        let firsttime = value[0]._d
        let lasttime = value[1]._d
        userkey.cfirst = moment(firsttime).format('YYYY-MM')
        userkey.clasttime = moment(lasttime).format('YYYY-MM')
    };
    // 发票时间
    const invoicetimeChan = (value) => {
        let firsttime = value[0]._d
        let lasttime = value[1]._d
        userkey.ifirst = moment(firsttime).format('YYYY-MM')
        userkey.ilasttime = moment(lasttime).format('YYYY-MM')
    }

    return (
        <div className='putbox'>
            <div className='querybox'>
                <Row className='queryrow'>
                    <Col span={1}>
                        公司ID：
                    </Col>
                    <Col span={5}>
                        <Input defaultValue="" onChange={getucomID} />
                    </Col>
                    <Col span={1}>
                        公司名称
                    </Col>
                    <Col span={5}>
                        <Input defaultValue="" onChange={getucomName} />
                    </Col>
                    <Col span={1}>
                        客户ID
                    </Col>
                    <Col span={5}>
                        <Input defaultValue="" onChange={getuserID} />
                    </Col>
                    <Col span={1}>
                        客户名称
                    </Col>
                    <Col span={5}>
                        <Input defaultValue="" onChange={getuserName} />
                    </Col>
                </Row>
                <Row className='queryrow'>
                    <Col span={1}>
                        客户手机号
                    </Col>
                    <Col span={5}>
                        <Input defaultValue="" onChange={getuserphone} />
                    </Col>
                    <Col span={1}>
                        增值税纳税人类型
                    </Col>
                    <Col span={5}>
                        <Select
                            defaultValue="all"
                            style={{
                                width: "100%",
                            }}
                            onChange={handleChange}
                        >
                            <Option value="all">全部</Option>
                            <Option value="asl">一般纳税人</Option>
                            <Option value="asls">小规模纳税人</Option>
                        </Select>
                    </Col>
                    <Col span={1}>
                        循环项目服务起至月份:
                    </Col>
                    <Col span={5}>
                        <Space direction="vertical" size={12} className='spaceColor' >
                            <RangePicker locale={locale} picker="month" onChange={ctimeChan} />
                        </Space>
                    </Col>
                    <Col span={1}>
                        代开专票服务起至月份:
                    </Col>
                    <Col span={4}>
                        <Space direction="vertical" size={12} className='spaceColor'  >
                            <RangePicker locale={locale} picker="month" onChange={invoicetimeChan} />
                        </Space>
                    </Col>
                </Row>
                <Row className='queryrow'>
                    <Col span={22}></Col>
                    <Col span={2}>
                        <Button type="primary" onClick={() => {

                            console.log(userkey)

                            if (userkey) {
                                getcommess(userkey)
                            }
                        }
                        }>查询</Button>
                    </Col>
                </Row>
            </div>
            <div>
                <Row className='querybutton'>
                    <Col span={22}></Col>
                    <Col span={2}>
                        <Link to='companyMessage/companyDetails' comkey={(userkey.key)}><Button type="primary">查看详情</Button></Link>
                    </Col>
                </Row>

                <Row className='querybutton'>
                    <Col span={24}>
                        <Table rowSelection={rowSelection} columns={columns} dataSource={comMessdata} pagination={{pageSize:5}}/>
                    </Col>
                </Row>
            </div>

        </div>
    );
}

export default connect(mapStateToPrpos, mapDispatchToProps)(CompanyMessage);
